<div class="main-container">
    <h5>基本属性</h5>
    <div class="layui-form-item">
        <label class="layui-form-label">任务ID：</label>
        <div class="layui-input-block">
            <input type="text" lay-verify="required" placeholder="" autocomplete="off" name="id" class="layui-input" readonly>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">任务类型：</label>
        <div class="layui-input-block">
            <input type="text" lay-verify="required" placeholder="" autocomplete="off" name="type" class="layui-input" readonly>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">显示名称：</label>
        <div class="layui-input-block">
            <input type="text" lay-verify="required" placeholder="" autocomplete="off" name="display_name" class="layui-input">
        </div>
    </div>
    <h5>样式设置</h5>
    <div class="layui-form-item">
        <label class="layui-form-label">宽度：</label>
        <div class="layui-input-block">
            <input type="number" lay-verify="" value="120" minValue="60" maxValue="999" name="width" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">高度：</label>
        <div class="layui-input-block">
            <input type="number" lay-verify="" value="40" minValue="60" maxValue="999" name="height" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">主题颜色：</label>
        <div class="layui-input-block">
            <div class="layui-input-inline" style="width: 120px;">
                <input type="text" name="theme" value="" placeholder="" class="layui-input" id="theme-color">
            </div>
            <div class="layui-inline" style="left: -11px;">
                <div id="color-picker-theme"></div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">边框颜色：</label>
        <div class="layui-input-block">
            <div class="layui-input-inline" style="width: 120px;">
                <input type="text" name="stroke" value="" placeholder="" class="layui-input" id="stroke-color">
            </div>
            <div class="layui-inline" style="left: -11px;">
                <div id="color-picker-stroke"></div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">字体颜色：</label>
        <div class="layui-input-block">
            <div class="layui-input-inline" style="width: 120px;">
                <input type="text" name="color" value="" placeholder="" class="layui-input" id="color">
            </div>
            <div class="layui-inline" style="left: -11px;">
                <div id="color-picker-color"></div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">边线宽度：</label>
        <div class="layui-input-block">
            <input type="number" value="2" name="stroke_width" autocomplete="off" class="layui-input">
        </div>
    </div>
    <h5>拦截器</h5>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px;text-align: left;">前置拦截器：</label>
        <div class="layui-input-inline" style="width: 320px">
            <input type="text" lay-verify="" placeholder="" autocomplete="off" name="pre_interceptors" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px;text-align: left;">后置拦截器：</label>
         <div class="layui-input-inline" style="width: 320px">
            <input type="text" lay-verify="" placeholder="" autocomplete="off" name="post_interceptors" class="layui-input">
        </div>
    </div>

</div>
<script>
    layui.use(['colorpicker', 'jquery', 'form'], function () {
        let colorpicker = layui.colorpicker;
        let form = layui.form;
        let $ = layui.jquery;


        /**
         * 颜色选择器赋值
         */
        layui.$(document).ready(function () {
            let forms = independentProcessing()
            let theme = ('theme' in forms) && forms.theme !== '' ? forms.theme : '#FFFFFF'
            let stroke = ('stroke' in forms) && forms.stroke !== '' ? forms.stroke : '#000000'
            let color = ('color' in forms) && forms.color !== '' ? forms.color : '#000000'
            let stroke_width = ('stroke_width' in forms) && forms.stroke_width !== '' ? forms.stroke_width : 2
            layui.$('input[name="theme"]').val(theme)
            layui.$('input[name="stroke"]').val(stroke)
            layui.$('input[name="color"]').val(color)
            layui.$('input[name="stroke_width"]').val(stroke_width)

            //主题颜色
            colorpicker.render({
                elem: '#color-picker-theme',
                color: theme,
                done: function (color) {
                    $('#theme-color').val(color);
                    propertyKeysSet()
                }
            });
            //边框颜色
            colorpicker.render({
                elem: '#color-picker-stroke',
                color: stroke,
                done: function (color) {
                    $('#stroke-color').val(color);
                    propertyKeysSet()
                }
            });
            //字体颜色
            colorpicker.render({
                elem: '#color-picker-color',
                color: color,
                done: function (color) {
                    $('#color').val(color);
                    propertyKeysSet()
                }
            });
        })

    })


</script>
